<!-- User -->
<template>
    <div class="User">
        <div style="float: left">
            <el-button type="danger">删除</el-button>
            <el-button @click="addUser()">添加</el-button>
            <el-button>批量添加</el-button>
        </div>
        <div class="receive-show">
            <el-empty v-if="list == []" :image-size="300"> </el-empty>
            <div v-else style="width: 100%; height: 100%">
                <el-table
                    :data="
                        list.filter(
                            (data) =>
                                !search ||
                                data.nickName
                                    .toLowerCase()
                                    .includes(search.toLowerCase())
                        )
                    "
                    :stripe="true"
                    style="width: calc(100% - 30px)"
                    @selection-change="handleSelectionChange"
                >
                    <el-table-column type="selection" width="55">
                    </el-table-column>
                    <el-table-column
                        fixed
                        prop="nickName"
                        label="用户名"
                        width="120"
                    >
                    </el-table-column>

                    <el-table-column prop="phoneNum" label="手机号" width="200">
                    </el-table-column>
                    <el-table-column prop="email" label="邮箱" width="300">
                    </el-table-column>

                    <el-table-column align="left" style="align-items: right">
                        <template slot="header" slot-scope="scope">
                            <el-input
                                v-model="search"
                                size="mini"
                                placeholder="输入关键字搜索"
                                style="max-width: 300px; float: left"
                                clearable=""
                            />
                        </template>
                        <template slot-scope="scope">
                            <el-button
                                size="mini"
                                @click="handleEdit(scope.$index, scope.row)"
                                >修改</el-button
                            >
                            <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.$index, scope.row)"
                                >删除</el-button
                            >
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                    v-if="list != []"
                    class="pagination"
                    background
                    layout="prev, pager, next"
                    :page-size="pageSize"
                    :total="totalElements"
                    @current-change="pageChange"
                >
                </el-pagination>
            </div>
        </div>

        <!-- 对话框 -->
        <el-dialog title="编辑" :visible.sync="dialogFormVisible">
            <el-form :model="form" style="width: 90%">
                <el-form-item label="用户名" :label-width="formLabelWidth">
                    <el-input
                        v-model="form.nickName"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item label="电话" :label-width="formLabelWidth">
                    <el-input
                        v-model="form.phoneNum"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
                <el-form-item label="描述" :label-width="formLabelWidth">
                    <el-input
                        v-model="form.email"
                        autocomplete="off"
                    ></el-input>
                </el-form-item>
            </el-form>
            <!-- 下方确定按钮 -->
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitUser">保 存</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import api from "@/utils/api";
import { Message } from "element-ui";
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from ‘《组件路径》‘;

export default {
    name: "User",
    components: {},
    props: [],
    data() {
        //这里存放数据
        return {
            pageSize: 10,
            totalElements: 0,
            pageIdx: 0,
            search: "",
            list: [],
            // 对话框
            dialogFormVisible: false,
            formIdx: -1,
            // 对话框数据
            form: {},
            formLabelWidth: "80px",
        };
    },
    //监听属性 类似于data概念
    computed: {
        schoolId() {
            return this.$store.state.school.schoolId;
        },
    },
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        // 保存修改
        submitUser() {
            if (this.form.userId == null) {
                api.insertUser(this.form).then((data) => {
                    Message.success("添加成功");
                    this.dialogFormVisible = false;
                    this.queryUserAll();
                });
            } else {
                api.updateUser(this.form).then((data) => {
                    Message.success("修改成功");
                    this.dialogFormVisible = false;
                    this.queryUserAll();
                });
            }
        },
        // 获取所有用户
        queryUserAll() {
            api.queryUserAll().then((data) => {
                this.list = data.data;
            });
        },
        // 页面改版
        pageChange(val) {
            this.pageIdx = val - 1;
            this.queryUserAll();
        },
        // 选择变化
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        addUser() {
            this.dialogFormVisible = true;
            this.form = { nickName: "", phoneNum: "", email: "" };
        },
        handleEdit(index, row) {
            this.dialogFormVisible = true;
            this.form = { ...row };
        },
        handleDelete(index, row) {
            let that = this;
            this.$confirm("确定删除？")
                .then((_) => {
                    console.log("yes");
                    //
                    api.deleteUser(row.userId).then((data) => {
                        Message.success("删除成功");
                        that.queryUserAll();
                    });
                    done();
                })
                .catch((_) => {});
        },
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created() {},
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted() {
        let that = this;
        setTimeout(() => that.queryUserAll(), 300);
    },
    beforeCreate() {}, //生命周期 - 创建之前
    beforeMount() {}, //生命周期 - 挂载之前
    beforeUpdate() {}, //生命周期 - 更新之前
    updated() {}, //生命周期 - 更新之后
    beforeDestroy() {}, //生命周期 - 销毁之前
    destroyed() {}, //生命周期 - 销毁完成
    activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.User {
    padding: 20px;
    background-color: #fff;
    width: 100%;
    height: 100%;
}
.receive-show {
    height: calc(100% - 60px);
    width: 100%;
    .pagination {
        margin-top: 26px;
    }
}
</style>
